<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '修改' : '新增' }}高德Key</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>key：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-input placeholder="请输入key" type="text" v-model="data.key" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">所属账号：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input placeholder="请输入所属账号" type="text" v-model="data.account" @input="setTip('','')"></el-input>
          </div>
        </div>


        <div class="line">
          <span class="lab">地理服务使用上限：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input placeholder="请输入地理服务使用上限" type="number" v-model="data.geoCountMax" min="0" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">关键字查询服务使用上限：</span>
          <div :class="{'error_border':tip_num===4}">
            <el-input placeholder="请输入关键字查询服务使用上限" type="number" v-model="data.placeCountMax" min="0" @input="setTip('','')"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">周边查询服务使用上限：</span>
          <div :class="{'error_border':tip_num===5}">
            <el-input placeholder="请输入周边查询服务使用上限" type="number" v-model="data.placeAroundCountMax" min="0" @input="setTip('','')"></el-input>
          </div>
        </div>


        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>排序(<em>不可重复</em>)：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-input placeholder="排序不能与原有数据的排序重复" type="number" v-model="data.sort" min="1" @input="setTip('','')"></el-input>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>

import {getDetail, addData, updateData} from "@/api/config/gaode";

export default {
  props: ['mid'],
  data() {
    return {
      data: {
        geoCountMax: 0,
        placeCountMax: 0,
        placeAroundCountMax: 0,
        sort: ''
      },
      infoTip: '',
      tip_num: '',
      loading: false
    }
  },
  mounted() {
    if (this.mid) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(this.mid).then(res => {
        that.data = res
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    // 确认编辑
    confirmEdit() {
      if (!this.data.key) {
        this.setTip(1, '请输入key！');
      } else if (!this.data.sort || this.data.sort < 1 || (this.data.sort) % 1 !== 0) {
        this.setTip(2, '排序需大于0且为整数!')
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      if (that.mid) {
        updateData(that.data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message: '操作成功！',
            duration: 1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(that.data).then(res => {
          that.closePopup(true);
          that.$message.success({
            message: '操作成功！',
            duration: 1500
          });
        }).catch((e) => {
          that.loading = false;
        });
      }
    },


    setTip(num, text) {
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>
.lab em {
  color: #e40000;
  font-size: 14px;
}

.line .lab {
  width: 200px;
}

.line div {
  width: 250px;
}
</style>
